{% extends 'base.html' %}

{% load humanize %}

{% block title %}
  | {{ listing.title}}
{% endblock %}

{% block content %}

<section id="showcase-inner" class="py-5 text-white">
    <div class="container">
      <div class="row text-center">
        <div class="col-md-12">
          <h1 class="display-4">{{ story.story_title }}</h1>
          <p>{{ story.story_published_date }}</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Breadcrumb -->
  <section id="bc" class="mt-3">
    <div class="container">
      <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item">
            <a href="{% url 'index' %}">Home</a>
          </li>
          <li class="breadcrumb-item">
            <a href="{% url 'storys' %}">Storys</a>
          </li>
          <li class="breadcrumb-item active">{{ story.story_title }}</li>
        </ol>
      </nav>
    </div>
  </section>

  {% include 'partials/_alerts.html' %}

  <!-- Listing -->
  <section id="listing" class="py-4">
    <div class="container">
      <a href="{% url 'storys' %}" class="btn btn-light mb-4">Back To Storys</a>
      <div>
        <div class="col-md-9">
          <!-- Home Main Image -->
          <img src="{{ story.photo.url }}" alt="" class="img-main img-fluid mb-3">
          </div>
          <!-- Fields -->
          <div class="row mb-5 fields">
            <div class="col-md-6" style="text-align: left;">
            {{ story.description }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
{% endblock %}
